// 获取学员的成绩
function getScore() {
  axios.get('/score/list').then(({ data: res }) => {
    console.log(res)
    const { code, data, message } = res
    // 遍历对象
    if (code === 0) {
      let str = ''
      for (let k in data) {
        str += `
      <tr>
        <th scope="row">${k}</th>
        <td>${data[k].name}</td>
        <td class="score" data-id='${k}' data-batch='1'>${data[k].score[0]}</td>
        <td class="score" data-id='${k}' data-batch='2'>${data[k].score[1]}</td>
        <td class="score" data-id='${k}' data-batch='3'>${data[k].score[2]}</td>
        <td class="score" data-id='${k}' data-batch='4'>${data[k].score[3]}</td>
        <td class="score" data-id='${k}' data-batch='5'>${data[k].score[4]}</td>
      </tr>`

      }
      document.querySelector('tbody').innerHTML = str
    }
  })
}
getScore()

// 修改成绩
document.querySelector('tbody').addEventListener('click', function (e) {
  if (e.target.tagName === 'TD' && e.target.className === 'score') {
    const id = e.target.dataset.id
    const batch = e.target.dataset.batch
    // 1.先获取TD里的值   td.innerHTML
    const TDvalue = e.target.innerHTML
    // 2.创建input输入框
    e.target.innerHTML = `<input type="text">`
    // 3.将值放进输入框中 并获得光标
    e.target.children[0].value = TDvalue
    e.target.children[0].focus()

    //  修改样式

    // 失去光标 把值还原
    e.target.children[0].addEventListener('blur', function () {
      // toastr.error('请按Enter键修改成绩')
      e.target.children[0].value = TDvalue
    })
    // 按键按Enter 才修改数据
    e.target.children[0].addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        // 参数   给上面添加自定义属性 然后就能获取id, batch ,score
        const data = {
          stu_id: id,
          batch,
          score: this.value
        }
        console.log(data)
        axios.post('/score/entry', data).then(({ data: res }) => {
          if (res.code === 0) {
            toastr.info('成绩修改成功')
            getScore()
          }
        })
      }
    })
  }
})